<template>
    <div class="layout-wrap">
        <div class="global-nav" v-show="route.meta.showHeader === undefined || route.meta.showHeader">
            <div class="logo" :class="terminal">
                <img :src="logo" alt="logo" :class="terminal">
                <p class="logo-name">PL24</p>
            </div>
            <div class="nav-list" v-if="terminal === 'windows'">
                <dl>
                    <dd v-for="item in routes" :key="item.name" @click="router.push({
                        name: item.name
                    })" :class="route.name === item.name ? 'active' : ''">{{ item.meta.name }}</dd>
                </dl>
            </div>
            <div class="personal-info" :class="terminal">
                <div class="login" v-if="terminal === 'windows' && (!initUserInfoStore.userInfo.avatar)"
                    @click="dialogLoginVisible = true">登录</div>
                <img :src="initUserInfoStore.userInfo.avatar ? initUserInfoStore.userInfo.avatar : Elephant" alt=""
                    :class="terminal">
            </div>
        </div>
        <div class="global-body">
            <div class="search" :class="terminal" v-show="route.meta.showInput">
                <video :src="SearchVideo"></video>
                <div class="ele-custom-wrap">
                    <div class="ele-custom">
                        <div class="top-tag">
                            <span v-for="item in searchTop" :key="item.name" @click="toWhere(item.target, item.name)">
                                {{item.text}}
                            </span>
                        </div>
                        <el-input v-model="input" placeholder="请输入关键词" class="input" />
                        <div class="bottom-tag">
                            <i>热搜榜：</i>
                            <span>学习</span>
                            <span>学习</span>
                            <span>学习</span>
                            <span>学习</span>
                        </div>
                    </div>
                </div>
                <div class="nav-to" v-if="clientWidthLimit && terminal !== 'phone'">
                    <ul>
                        <li @click="toWhere('open', 'http://121.199.55.196/')">
                            <img :src="studyGril" alt="">
                            <div class="desc">仿掘金网站</div>
                            <img :src="turnToLeft" alt="">
                        </li>
                        <li @click="toWhere('push', 'joke')">
                            <img :src="threeYoungWomen" alt="">
                            <div class="desc">看不完的笑话</div>
                            <img :src="swap" alt="">
                        </li>
                        <li>
                            <img :src="womanOnABike" alt="">
                            <div class="desc">闲情逸致单车</div>
                            <img :src="swap" alt="">
                        </li>
                        <li>
                            <img :src="boxesInBasketball" alt="">
                            <div class="desc">玩耍我的玩耍</div>
                            <img :src="turnToRight" alt="">
                        </li>
                    </ul>
                </div>
            </div>
            <div class="list">
                <div class="nav-to" v-if="terminal === 'phone'">
                    <ul>
                        <li>
                            <img :src="studyGril" alt="">
                            <div class="desc">记录我的记录</div>
                            <img :src="turnToLeft" alt="">
                        </li>
                        <li>
                            <img :src="threeYoungWomen" alt="">
                            <div class="desc">倾听我的倾听</div>
                            <img :src="swap" alt="">
                        </li>
                        <li>
                            <img :src="womanOnABike" alt="">
                            <div class="desc">闲情逸致单车</div>
                            <img :src="swap" alt="">
                        </li>
                        <li>
                            <img :src="boxesInBasketball" alt="">
                            <div class="desc">玩耍我的玩耍</div>
                            <img :src="turnToRight" alt="">
                        </li>
                    </ul>
                </div>
                <router-view />
            </div>
            <div class="footer" v-show="route.meta.showFooter === undefined || route.meta.showFooter">
                <div class="footer-wrap">
                    <dl :class="terminal">
                        <dd>
                            <ul>
                                <li>
                                    <div class="logo" :class="terminal">
                                        <img :src="logo" alt="logo" :class="terminal">
                                        <p class="logo-name">PL24</p>
                                    </div>
                                </li>
                                <li>
                                    <a href="https://www.bilibili.com/">哔哩哔哩</a>
                                </li>
                                <li>

                                    <a href="http://121.199.55.196/">我的博客</a>
                                </li>
                                <li>
                                    <a href="https://markdown.p2hp.com/">Markdown</a>
                                </li>
                                <li>
                                    <a href="https://pinia.vuejs.org/">Pinia</a>
                                </li>
                            </ul>
                        </dd>
                        <dd v-for="(item, index) in footerNav" :key="index">
                            <ul>
                                <li v-for="navItem in item" :key="navItem.name">
                                    <a :href="navItem.url" target="block" :style="{color: seriesColor[index % seriesColor.length]}">{{ navItem.name }}</a>
                                </li>
                            </ul>
                        </dd>
                        <dd>
                            <ul>
                                <li class="beian">
                                    备案号：鲁ICP备2021037728号-1
                                </li>
                            </ul>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <el-dialog v-model="dialogLoginVisible" title="">
            <Login @closeDialog="close" />
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import Login from '@/pages/login/index.vue'
import logo from '@/assets/img/car-logo.png'
import Elephant from '@/assets/img/Elephant.png'
import Search from '@/assets/img/Search.gif'
import studyGril from '@/assets/img/study-gril.png'
import turnToRight from '@/assets/img/turn-to-right.png'
import turnToLeft from '@/assets/img/turn-to-left.png'
import swap from '@/assets/img/icons8-swap.png'
import threeYoungWomen from '@/assets/img/three-young-women.png'
import SearchVideo from '@/assets/video/Search-bg.webm'
import boxesInBasketball from '@/assets/img/boxes-in-basketball.png'
import womanOnABike from '@/assets/img/woman-on-a-bike.png'
import { computed, ref } from 'vue';
import { terminalStore } from './store'
import { routes } from './router'
import { useRoute, useRouter } from 'vue-router'
import { getJoke } from '../src/api'
import { userInfoStore } from './store';

const initUserInfoStore = userInfoStore()

const seriesColor = ['red', 'green', 'blue', 'gray']
const footerNav = [
    [
        {
            url: 'https://router.vuejs.org/',
            name: 'VueRouter'
        },
        {
            url: 'https://code.visualstudio.com/',
            name: 'Visual Studio Code'
        },
        {
            url: 'https://vuejs.org/',
            name: 'vue3'
        },
        {
            url: 'https://vitejs.cn/',
            name: 'Vite'
        }
    ],
    [
        {
            url: 'https://www.eggjs.org/',
            name: 'egg'
        },
        {
            url: 'https://meyerweb.com/eric/tools/css/reset/',
            name: 'cssreset'
        },
        {
            url: 'https://yarnpkg.top/',
            name: 'yarn'
        },
        {
            url: 'https://icons8.com/',
            name: 'icons8'
        }
    ],
    [
        {
            url: 'http://www.axios-js.com/',
            name: 'axios'
        },
        {
            url: 'https://element-plus.gitee.io/zh-CN/',
            name: 'Element Plus'
        },
    ],
    [
        {
            url: 'http://121.199.55.196/',
            name: 'keepcoding'
        },
        {
            url: 'https://juejin.cn/',
            name: '掘金'
        },
        {
            url: 'https://www.tslang.cn/',
            name: 'typescript'
        },
        {
            url: 'https://react.docschina.org/',
            name: 'React'
        }
    ]
]

const searchTop = [
    {
        text: '编辑',
        name: 'Edit',
        target: 'push'
    },
    {
        text: '学习',
        name: 'Learing',
        target: 'open'
    },
    {
        text: '旅游',
        name: 'Travel',
        target: 'push'
    },
]
const terminal = terminalStore().flag  // 失去响应式
const useTerminalStore = terminalStore()
const router = useRouter()
const route = useRoute()
const dialogLoginVisible = ref(false)

const clientWidthLimit = computed(() => {
    return useTerminalStore.clientWidth > 940
})

const close = () => {
    dialogLoginVisible.value = false
}

const input = ref('')
getJoke()
const toWhere = (way: string, path: string) => {
    switch (way) {
        case 'open':
            open(path)
            break;
        case 'push':
            router.push({
                name: path
            })
            break;
        default:
            break;
    }
}
</script>

<style lang="less" scoped>
#app {
    width: 100%;
    height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@keyframes moveBalloon {
    0% {
        position: relative;
        left: -1000px;
        transform: rotateZ(0deg);
    }

    30% {
        position: relative;
        left: 500px;
        transform: rotateZ(0deg);
    }

    70% {
        position: relative;
        left: -200px;
        transform: rotateZ(0deg);
    }

    100% {
        position: relative;
        left: 0;
        transform: rotateZ(0deg);
    }
}

.layout-wrap {
    overflow-x: hidden;

    .global-nav {
        // border: 1px solid red;
        display: flex;
        height: 50px;
        margin-top: 30px;
        position: relative;
        align-items: center;

        .logo {
            display: flex;
            align-items: center;

            &.windows {
                margin-left: 50px;
            }

            &.phone {
                margin-left: 10px;
            }

            img {
                width: 45px;

                &.windows {
                    margin-right: 15px;
                }

                &.phone {
                    margin-right: 5px;
                    position: relative;
                    top: -5px;
                }
            }

            p {
                font-weight: bold;
                background-image: linear-gradient(to right, rgb(125, 236, 27), rgb(169, 23, 217));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-size: 24px;
            }
        }

        .nav-list {
            margin-left: 50px;

            dl {
                display: flex;
                // border: 1px solid red;
                height: 50px;
                align-items: center;

                dd {
                    // height: 20px;
                    padding: 10px 10px;
                    font-weight: bold;
                    // border: 1px solid red;
                    font-size: 18px;

                    &:hover,
                    &.active {
                        background: rgba(0, 0, 0, 0.2);
                        cursor: pointer;
                        border-radius: 3px;
                        color: rgb(206, 32, 32);
                    }
                }
            }
        }

        .personal-info {
            position: absolute;
            right: 30px;
            display: flex;
            height: 46px;
            align-items: center;
            font-size: 18px;
            // background-image: linear-gradient(to right, rgb(255, 0, 68), rgb(154, 224, 15));
            border-radius: 6px;
            overflow: hidden;

            //   &.windows{
            //      margin-right: 15px;
            // }
            .login {
                display: none;
            }

            &:hover,
            &.windows {
                .login {
                    cursor: pointer;
                    display: block;
                    position: relative;
                    top: 3px;
                    margin-right: 10px;
                    color: lightseagreen;
                    font-weight: bold;
                }
            }

            img {
                &.windows {
                    height: 46px;
                    cursor: pointer;
                }

                &.phone {
                    position: relative;
                    top: -5px;
                    height: 36px;
                }
            }
        }
    }

    .global-body {
        width: 100vw;

        .search {
            animation: moveBalloon .8s ease-in-out;

            &.windows {
                position: relative;
                display: flex;

                video {
                    width: 80%;
                    border: 1px solid transparent;
                    margin: auto;
                }

                .ele-custom-wrap {
                    position: absolute;
                    width: 80%;
                    border: 10px solid white;
                    left: 50%;
                    height: 100%;
                    transform: translateX(-50%);

                    .ele-custom {
                        position: absolute;
                        left: 50%;
                        top: 100px;
                        transform: translateX(-50%);
                        width: 500px;

                        // border: 1px solid red;
                        .top-tag {
                            text-align: center;
                            padding-bottom: 10px;

                            span {
                                padding: 3px 10px;
                                font-weight: bold;
                                cursor: pointer;
                                &:hover{
                                    color: rgb(45, 192, 172);
                                }
                            }
                        }

                        .input {
                            height: 43px;
                            font-size: 18px;
                        }

                        .bottom-tag {
                            padding-left: 10px;

                            i {
                                font-size: 16px;
                            }

                            span {
                                font-size: 16px;
                                margin: 3px 5px;
                                border-bottom: 1px solid gray;
                                font-weight: bold;
                            }
                        }
                    }
                }

                .nav-to {
                    position: absolute;
                    width: 80%;
                    left: 50%;
                    transform: translateX(-50%);
                    top: 300px;
                    height: 360px;

                    ul {
                        display: flex;
                        //   border: 1px solid red;
                        height: 100%;
                        justify-content: space-between;

                        li {
                            cursor: pointer;
                            padding: 3px;
                            position: relative;
                            border: 1px solid rgba(36, 178, 210, 0.1);

                            img:nth-child(1) {
                                height: 220px;
                            }

                            .desc {
                                text-align: center;
                            }

                            img:last-child {
                                height: 50px;
                                position: absolute;
                                right: 30px;
                                bottom: 15px;
                                //  border: 1px solid red;
                            }

                            &:hover {
                                background: rgba(36, 178, 210, 0.3);

                                .desc {
                                    color: antiquewhite;
                                }
                            }
                        }
                    }
                }
            }

            &.phone {
                position: relative;
                display: flex;

                // height: 500px;
                video {
                    position: relative;
                    top: -40px;
                    left: -100px;
                    z-index: -1;
                    border: 1px solid transparent;
                    width: 150%;
                }

                .ele-custom-wrap {
                    position: absolute;
                    width: 80%;
                    // border: 1px solid red;
                    // overflow: hidden;
                    left: 50%;
                    height: 100%;
                    transform: translateX(-50%);

                    .ele-custom {
                        position: absolute;
                        left: 50%;
                        top: 60px;
                        transform: translateX(-50%);
                        width: 500px;
                        text-align: center;

                        // border: 1px solid red;
                        .top-tag {
                            // text-align: center;
                            padding-bottom: 10px;

                            span {
                                padding: 3px 3px;
                                font-size: 16px;
                                font-weight: bold;
                            }
                        }

                        .input {
                            height: 43px;
                            width: 360px;
                            font-size: 18px;
                        }

                        .bottom-tag {
                            padding-left: 10px;
                            // text-align: center;

                            i {
                                font-size: 16px;
                            }

                            span {
                                font-size: 16px;
                                margin: 3px 5px;
                                border-bottom: 1px solid gray;
                                font-weight: bold;
                            }
                        }
                    }
                }
            }
        }

        .list {

            // border: 1px solid red;
            .nav-to {
                ul {

                    li {
                        border: 1px solid rgba(36, 178, 210, 0.1);
                        padding-left: 13px;
                        position: relative;
                        width: 95%;
                        margin: auto;
                        margin-bottom: 10px;
                        display: flex;

                        img:nth-child(1) {
                            height: 220px;

                        }

                        .desc {
                            height: 100px;
                            line-height: 100px;
                            margin-left: 10px;
                            text-align: center;
                        }

                        img:last-child {
                            height: 50px;
                            position: absolute;
                            right: 30px;
                            bottom: 15px;

                        }
                    }
                }
            }

            .cont {
                position: relative;
                top: -200px;
                height: 100px;
            }
        }

        .footer {
            background: rgb(235, 237, 235);
            padding: 20px 0;

            .footer-wrap {
                // height: 500px;
                width: 80%;
                margin: auto;

                dl.windows {
                    dd {
                        margin-bottom: 10px;
                        margin-left: 70px;
                        display: inline-block;
                        width: 450px;
                        // border: 1px solid green;

                        ul {
                            li {
                                margin-bottom: 10px;
                                text-align: center;

                                &.beian {
                                    color: gray;
                                }

                                a {
                                    text-decoration: none;
                                }

                                .logo {
                                    display: flex;
                                    align-items: center;

                                    &.windows {
                                        margin-left: 50px;
                                    }

                                    &.phone {
                                        margin-left: 10px;
                                    }

                                    img {
                                        width: 95px;

                                        &.windows {
                                            margin-right: 15px;
                                        }

                                        &.phone {
                                            margin-right: 5px;
                                            position: relative;
                                            top: -5px;
                                        }
                                    }

                                    p {
                                        font-weight: bold;
                                        background-image: linear-gradient(to right, rgb(125, 236, 27), rgb(169, 23, 217));
                                        -webkit-background-clip: text;
                                        -webkit-text-fill-color: transparent;
                                        font-size: 34px;
                                    }
                                }
                            }
                        }
                    }
                }

                dl.phone {
                    dd {
                        margin-bottom: 10px;

                        ul {
                            li {
                                margin-bottom: 10px;

                                a {
                                    text-decoration: none;
                                }

                                &.beian {
                                    color: gray;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>